<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">



<h:form id="msgAdminForm">
	<p:growl id="uploadMsg" showDetail="true" />

	<table id="tbl">
		<tr>
			<td valign="top" width="300px"><p:panel header="分组"
				style="height:400px;">
				<p:commandLink value="upload a xls file"
					update="msgAdminForm:selectGroup" oncomplete="uploadDialog.show()"
					global="false" />
				<br />
				<p:commandButton value="add a group" onclick="addGroupDialog.show()"></p:commandButton>
				<br />

				<p:dataList var="g" value="#{msgAdminBean.groupsItems}"
					id="groupInfo" style="width:200px">
					<p:column>
						<h:panelGrid columns="2">
							<p:commandLink value="#{g.label}" process="@this"
								actionListener="#{msgAdminBean.getSelectedGroupInTree}"
								update="msgAdminForm:selectedEmpTbl msgAdminForm:summaryGroup"
								oncomplete="handelClickComplete()">
								<f:attribute name="selectedGroupInTree" value="#{g.value}"></f:attribute>
							</p:commandLink>
							<p:commandLink value="delete" process="@this"
								actionListener="#{msgAdminBean.deleteSelectedGroup}"
								update="msgAdminForm:groupInfo">
								<f:attribute name="selectedGroupInTree" value="#{g.value}"></f:attribute>
							</p:commandLink>
						</h:panelGrid>

					</p:column>
				</p:dataList>
			</p:panel></td>
			<td valign="top"><h:panelGrid columns="5" id="summaryGroup">
				<h:outputText value="当前选定小组: "
					style="color:#804040;font-weight:bold;"></h:outputText>
				<h:outputText value="#{msgAdminBean.currentGroup.name}"
					style="font-weight:bold;"></h:outputText>
				<h:outputText value="共有 " style="color:#804040;font-weight:bold;"></h:outputText>
				<h:outputText value="#{msgAdminBean.numberOfItemsInCurrentGroup}"
					style="color:Red;font-style:normal;font-size:15px;font-weight:bold;"></h:outputText>
				<h:outputText value=" 个联系人" style="color:#804040;font-weight:bold;"></h:outputText>
			</h:panelGrid> <p:separator rendered="#{msgAdminBean.currentGroup.name ne null}" />

			<h:panelGrid id="menuBar" columns="5">
				<p:fileUpload
					fileUploadListener="#{msgAdminBean.fileUploadListener}"
					allowTypes="*.xls;*.txt" description="telBook"
					update="selectedEmpTbl uploadMsg msgAdminForm:summaryGroup"
					auto="true" />
				<h:outputText value=" | " />
				<p:commandLink value="add a new user" onclick="addUserDialog.show()" />
				<h:outputText value=" | " />
				<p:commandLink value="搜索联系人"
					actionListener="#{msgAdminBean.initSearchForm}"
					update="pnSearch msgSearch" oncomplete="searchDialog.show()" />
			</h:panelGrid> 
			<p:dataTable emptyMessage="该组中没有任何记录"
				value="#{msgAdminBean.selectedEmps}" var="e" id="selectedEmpTbl"
				rows="10" height="400" paginator="true" 
				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="10,50,100"
				rowIndexVar="index" selection="#{msgAdminBean.selectedEmpsInTbl}">
				<p:column selectionMode="multiple" />
				<p:column headerText="ID">
					<h:outputText value="#{index+1}" />
				</p:column>
				<p:column headerText="姓名" style="width:250px" sortBy="#{e.name}">


					<h:outputText value="#{e.name}"></h:outputText>



				</p:column>
				<p:column headerText="电话" style="width:250px">


					<h:outputText value="#{e.phoneNumber}"></h:outputText>



				</p:column>

				<f:facet name="footer">
					<p:commandButton value="从本组中删除" onclick="deleteEmpDialog.show()" />
					<p:commandButton value="移动到另外组" onclick="" />
				</f:facet>
			</p:dataTable> <p:commandButton process="@this"
				onclick="jsf.ajax.request(this, event, {render:'msgAdminForm:selectedEmpTbl'});"
				id="btnRefresh" style="display:none" /></td>
		</tr>
	</table>

	<p:dialog widgetVar="uploadDialog">
		<p:fileUpload widgetVar="uploader"
			fileUploadListener="#{msgAdminBean.fileUploadListener}"
			allowTypes="*.xls" description="telBook"
			update="selectedEmpTbl uploadMsg" customUI="true" />
		<h:selectOneMenu value="#{msgAdminBean.selectedGroupId}"
			id="selectGroup">
			<f:selectItems value="#{msgAdminBean.groupsItems}"></f:selectItems>
			<p:ajax event="change" update="selectGroup"></p:ajax>
		</h:selectOneMenu>
		<br />
		<h:outputLink value="#" title="Upload" onclick="uploader.upload();"
			style="font-weight:bold;color:#616D7E">  
				    上传 
				</h:outputLink>


	</p:dialog>
	<p:dialog widgetVar="addGroupDialog" modal="true">
		<h:panelGrid columns="2" id="addPnel">
			<h:outputText value="name :"></h:outputText>
			<h:inputText value="#{msgAdminBean.newGroupName}"></h:inputText>
			<p:commandButton value="add"
				actionListener="#{msgAdminBean.addNewGroup}" process="addPnel"
				update="msgAdminForm:groupInfo" oncomplete="addGroupDialog.hide();"></p:commandButton>
		</h:panelGrid>
	</p:dialog>
	<p:dialog widgetVar="deleteEmpDialog">
		<h:outputText value="are you sure to delete selected emps?" />
		<h:panelGrid columns="2">
			<p:commandButton value="yes"
				actionListener="#{msgAdminBean.deleteSelectedEmps}" immediate="true"
				process="@parent" update="selectedEmpTbl summaryGroup"
				oncomplete="deleteEmpDialog.hide()" />
			<p:commandButton value="no" onclick="deleteEmpDialog.hide()"
				update="selectedEmpTbl" />
		</h:panelGrid>
	</p:dialog>
	<p:dialog widgetVar="addUserDialog" modal="true" header="添加一个联系人">
		<h:panelGrid columns="2" id="pnAddUser">
			<h:outputText value="姓名 ：" />
			<h:inputText value="#{msgAdminBean.newUserName}"></h:inputText>
			<h:outputText value="手机号码" />
			<h:inputText value="#{msgAdminBean.newUserPhone}" />
			<p:commandButton value="添加"
				actionListener="#{msgAdminBean.addNewContactToCurrentGroup}"
				process="pnAddUser" update="selectedEmpTbl summaryGroup uploadMsg"
				oncomplete="addUserDialog.hide()"></p:commandButton>
		</h:panelGrid>
	</p:dialog>
	<p:dialog widgetVar="searchDialog" modal="true" width="500" header="搜索">
		<p:messages id="msgSearch" />

		<h:panelGrid id="pnSearch">
			<h:panelGrid columns="2" id="searchForm">
				<h:outputText value="输入姓名或电话号码" />
				<h:inputText value="#{msgAdminBean.searchKeyWord}" />
				<p:commandButton value="搜索"
					actionListener="#{msgAdminBean.searchEmp}"
					update="pnSearch msgSearch" process="searchForm" />
			</h:panelGrid>
			<p:dataTable id="searchResult"
				value="#{msgAdminBean.searchResultEmp}" var="se"
				rendered="#{!empty msgAdminBean.searchResultEmp}"
				selection="#{msgAdminBean.selectedEmpsInSearchResult}">
				<p:column selectionMode="multiple" />
				<p:column>
					<h:inputText value="#{se.name}" />
				</p:column>
				<p:column>
					<h:inputText value="#{se.phoneNumber}" />
				</p:column>
			</p:dataTable>
			<h:panelGrid columns="2"
				rendered="#{!empty msgAdminBean.searchResultEmp}">
				<p:commandButton value="修改" actionListener="#{msgAdminBean.editEmp}"
					process="pnSearch" update="selectedEmpTbl"
					oncomplete="searchDialog.hide()" />
				<p:commandButton value="从该组中删除选定联系人"
					actionListener="#{msgAdminBean.deleteEmpAfterSearch}"
					process="pnSearch" update="selectedEmpTbl summaryGroup"
					oncomplete="searchDialog.hide()" />
			</h:panelGrid>
		</h:panelGrid>
	</p:dialog>
</h:form>

</html>
